<template>
  <nav ref="nav" class="HeadBar">
    <ul>
      <li :class="{ active: activeIndex === 0 }" @click="setActive(0)">
        <router-link to="/">上传图片</router-link>
      </li>
      <li :class="{ active: activeIndex === 1 }" @click="setActive(1)">
        <router-link to="/about">数据返回</router-link>
      </li>
      <li :class="{ active: activeIndex === 2 }" @click="setActive(2)">
        <router-link to="/history">历史记录</router-link>
      </li>
    </ul>
    <div class="line" ref="line"></div>
  </nav>
</template>

<script>
import { ref, onMounted, nextTick, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  name: 'NavBar',
  setup() {
    const nav = ref(null);
    const line = ref(null);
    const activeIndex = ref(0);
    const route = useRoute();
    let pos = 0;
    let wid = 0;

    const setActive = (index) => {
      if (activeIndex.value === index) return;

      const navEl = nav.value;
      const lineEl = line.value;
      const activeEl = navEl.querySelector('ul li.active');

      const newActiveEl = navEl.querySelectorAll('ul li')[index];
      const newPos = newActiveEl.offsetLeft;
      const newWidth = newActiveEl.offsetWidth;

      const currentPos = activeEl ? activeEl.offsetLeft : 0;
      const currentWidth = activeEl ? activeEl.offsetWidth : 0;

      const animate = () => {
        if (newPos >= currentPos) {
          lineEl.style.width = `${(newPos - currentPos) / window.innerHeight * 100 + newWidth / window.innerHeight * 100}vh`;
          setTimeout(() => {
            lineEl.style.left = `${newPos / window.innerHeight * 100}vh`;
            lineEl.style.width = `${newWidth / window.innerHeight * 100}vh`;
          }, 300);
        } else {
          lineEl.style.left = `${newPos / window.innerHeight * 100}vh`;
          lineEl.style.width = `${(currentPos - newPos) / window.innerHeight * 100 + currentWidth / window.innerHeight * 100}vh`;
          setTimeout(() => {
            lineEl.style.width = `${newWidth / window.innerHeight * 100}vh`;
          }, 300);
        }

        setTimeout(() => {
          navEl.classList.remove('animate');
        }, 450);

        activeIndex.value = index;
      };

      navEl.classList.add('animate');
      animate();
    };

    onMounted(() => {
      nextTick(() => {
        const activeEl = nav.value.querySelector('ul li.active');
        if (activeEl) {
          pos = activeEl.offsetLeft;
          wid = activeEl.offsetWidth;
          line.value.style.left = `${pos / window.innerHeight * 100}vh`;
          line.value.style.width = `${wid / window.innerHeight * 100}vh`;
        }
      });
    });

    // 监听路由变化以更新活动索引
    watch(route, (newRoute) => {
      if (newRoute.path === '/') {
        setActive(0);
      } else if (newRoute.path === '/about') {
        setActive(1);
      } else if (newRoute.path === '/history') {
        setActive(2)
      }
    });

    return {
      nav,
      line,
      activeIndex,
      setActive
    };
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

body {
  background: #51faa3;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
}

nav {
  position: fixed; /* 固定位置 */
  top: 0;
  left: 0;
  padding: 2vh 0; /* 使用vh单位 */
  background: #ffffff;
  z-index: 1000;
}

.line {
  height: 0.3vh; /* 使用vh单位 */
  position: absolute;
  bottom: 0;
  margin: 1.5vh 0 0 0; /* 使用vh单位 */
  background: #0091eb;
  transition: all 0.4s ease;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: flex-start; /* 改为左对齐 */
  padding-left: 2vh; /* 添加左侧内边距 */
}

li {
  margin: 0 3vh 0 0; /* 使用vh单位 */
  opacity: .4;
  transition: all 0.4s ease;
  position: relative;
}

li:hover {
  opacity: .7;
}

li.active {
  opacity: 1;
}

li:last-child {
  margin-right: 0;
}

a, .router-link-active {
  text-decoration: none;
  color: #000000;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  letter-spacing: .2em;
  font-size: 1.5vh; /* 使用vh单位 */
  position: relative;
  z-index: 2;
  padding: 1vh 2vh; /* 使用vh单位 */
  outline: none;
  border: none;
  background-color: inherit;
}

li::before, li::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.4s ease-in-out;
  border-radius: 8px; /* 添加圆角 */
}

li::before {
  transform: scaleX(0.2) scaleY(0.5) translate(250%, 100%);
  border-top: solid 0.2vh #333; /* 使用vh单位 */
  border-left: solid 0.4vh #333; /* 使用vh单位 */
}

li::after {
  transform: translate(-50%, -50%) scaleX(0.2) scaleY(0.5);
  border-bottom: solid 0.2vh #333; /* 使用vh单位 */
  border-right: solid 0.4vh #333; /* 使用vh单位 */
}

li.active::before {
  transform: translate(0%, 0%) scaleX(1) scaleY(1);
  border-top: solid 0.2vh #0091eb; /* 使用vh单位 */
  border-left: solid 0.2vh #0091eb; /* 使用vh单位 */
  box-shadow: 0 0 0.8vh rgba(0, 145, 235, 0.6); /* 使用vh单位 */
}

li.active::after {
  transform: scaleX(1) scaleY(1) translate(0%, 0%);
  border-bottom: solid 0.2vh #0091eb; /* 使用vh单位 */
  border-right: solid 0.2vh #0091eb; /* 使用vh单位 */
  box-shadow: 0 0 0.8vh rgba(0, 145, 235, 0.6); /* 使用vh单位 */
}

@media (max-width: 768px) {
  li {
    margin: 0 2vh; /* 使用vh单位 */
  }

  a, .router-link-active {
    font-size: 1.2vh; /* 使用vh单位 */
    padding: 0.8vh 1.6vh; /* 使用vh单位 */
  }
}

@media (max-width: 480px) {
  li {
    margin: 0 1vh; /* 使用vh单位 */
  }

  a, .router-link-active {
    font-size: 1vh; /* 使用vh单位 */
    padding: 0.6vh 1.2vh; /* 使用vh单位 */
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
</style>